<template>
  <div class="hello">
    <index-header></index-header>
    <div class="download" >
      <img :src="backGround" alt="" class="bg">
      <div class="swiper-wrap">
        <swiper :options="swiperOption" v-if="showSwiper">
          <swiper-slide v-for="(item,index) of swiperList" :key="index">
            <img :src="item" alt="" class="banner-img">
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
      </div>
      <div class="down">
        <div class="ios">ios下载</div>
        <div class="android">android下载</div>
      </div>
    </div>
     <index-footer></index-footer>
  </div>
</template>

<script>
import IndexHeader from '@/pubic/IndexHeader'
import IndexFooter from '@/pubic/IndexFooter'

export default {
  name: 'Download',
  components: {
    IndexHeader,
    IndexFooter
  },

  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          autoplay: true,
          delay: 3000,
          disableOnInteraction: false
        },
        touchRatio: 0.5,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets'
        }
      },
      swiperList: [
        require('@/assets/img/download/phone-1.png'),
        require('@/assets/img/download/phone-2.png'),
        require('@/assets/img/download/phone-3.png')
      ],
      backGround: require('@/assets/img/download/bg.png')
    }
  },
  created () {
    this.menu()
  },
  methods: {
    menu () {
      window.scrollTo(0, 0)
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }

}
</script>

<style scoped lang='scss'>
.download /deep/  .swiper-slide img{
    width: 750px;
}
.download /deep/ .swiper-pagination{
    width: 120px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-left: -60px;
  }
.download /deep/ .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    color:#000;
    background: rgba(0,0,0,0.2);
  }
.download /deep/ .swiper-pagination-bullet-active {
    background: #f87372;
  }
.download{
  background: linear-gradient( #f9f9fe , #fff);
  height: 1250px;
  position: relative;
  margin-top: 88px;
  .bg{
    width: 750px;
    height: 999px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  .swiper-pagination{
    position: absolute;
    bottom: 150px;
    left: 50%;
  }
  .down{
    padding-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      width: 210px;
      height:56px;
      margin: 30px 60px;
      text-align: center;
      line-height: 56px;
      font-size: 28px;
      color:#fff;
      border-radius: 10px;
      background: #f87372;
    }
  }

}

</style>
